<!-- 上移动卡片 -->
<template>
  <div class="card">
    <div class="bg">
      <div class="top">
        <div class="title">{{ props.title }}</div>
        <div class="text">{{ props.text }}</div>
      </div>
    </div>
    <FreeRightItem :points="props.points"></FreeRightItem>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "ddd",
  },
  text: {
    type: String,
    default: "ddd",
  },
  points: {
    type: Array,
    default: ["共享环投生态平台的开放技术和数据"],
  },
});
</script>

<style lang="scss" scoped>
.card {
  width: 450px;
  //height: 680px;
  border-radius: 10px;
  border-top: $green 5px solid;
  margin-left: 40px;
  background-color: #fff;
  /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;
}
.card:first-child {
  margin-left: 0px;
}
.bg {
  background-image: linear-gradient(to left, #cbf8f4, #fcfefe);
  border-radius: 5px 5px 0 0;
}
//标题
.top {
  background-image: url(@/assets/images/parner2.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right 0 bottom -12px;
  padding: 20px 50px;
  padding-top: 30px;
  border-radius: 20px;
  .title {
    font-size: 34px;
    color: #222;
    font-weight: 800;
  }
  .text {
    font-size: 18px;
    color: #222;
    font-weight: 500;
  }
}
//过渡
.card:hover {
  transform: translateY(-20px);
  box-shadow: 1px 1px 20px 2px rgba(0, 0, 0, 0.2);
  .bg{
    background-image: linear-gradient(to left,$green, $green);
  }
  .text,.title{
  color: #fff;  
  }
  
}
</style>
